<template>
  <div class='container'>
    <Modal v-model="addSubject" title="添加学科" @on-ok="addOk" @on-cancel='addCancel' :footer-hide="true"
    :closable="false" :mask-closable="false">
      <Form :model="formItem" :label-width="80" :rules="ruleValidate" ref="ruleForm">
        <FormItem label="学科名称" prop="subjectName">
          <Input v-model="formItem.subjectName" placeholder="请添加学科名称"></Input>
        </FormItem>
        <FormItem label="是否显示">
          <el-switch
              v-model="formItem.isFrontDisplay"
              active-value=1
              inactive-value=0
            />
        </FormItem>
      </Form>
      <Row type='flex' justify="end">
        <Button @click="addCancel">取消</Button>
        <Button type="primary" @click="addOk" style="margin-left:15px">确定</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/subjects'
export default {
  props: {
    addSubject: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formItem: {
        subjectName: '',
        isFrontDisplay: 1
      },
      ruleValidate: {
        subjectName: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async addOk () {
      try {
        this.$refs.ruleForm.validate()
        await add(this.formItem)
        this.$parent.getRoleList()
        this.$refs.ruleForm.resetFields()
        this.$emit('update:addSubject', false)
      } catch (error) {
        console.log(error)
      }
    },
    addCancel () {
      this.$refs.ruleForm.resetFields()
      this.$emit('update:addSubject', false)
    }
  }
}
</script>

<style scoped lang='less'></style>
